<template lang="HTML">
  <div>
    <div>
        <van-nav-bar fixed>
          <template #right>
            <van-icon name="search" size="0.48rem" color="#fff" @click="enterSearch"/>
          </template>
         <template v-slot:left>
            <img src="@/assets/toutiao_logo.png" class="logo" />
          </template>
        </van-nav-bar>
    </div>
    <div class="main">
        <van-tabs v-model="channelId" sticky offset-top="1.2266666666666666rem">
                <van-tab :title="obj.name" v-for="obj in userChannels" :key="obj.id" :name="obj.id">
                 <ArticleList :channelId="obj.id"/>
               </van-tab>
        </van-tabs>
        <van-icon name="plus" class="addchannel" size="0.37533334rem" @click="editChannel"/>
    </div>
    <!-- 反馈面板 -->
    <van-action-sheet
     v-model="show"
     :actions="actions"
     @select="onSelect"
     @close = "onClose"
     @cancel = "onCancel"
     :cancel-text="cancelText" />
     <!-- 反馈其他的内容 -->
     <van-dialog v-model="showOther"
     show-cancel-button
     @confirm="reportOtherFn">
     <textarea v-model="reportContent" class="other_content" placeholder="请输入其他内容"></textarea>
     </van-dialog>
     <!-- 点击加号的编辑层弹出 -->
     <div>
      <!-- 挂载到 body 节点下 -->
     <van-popup v-model="showAddChannel" get-container="body">
     <div class="edit_channel">
      <EditChannel @backHome="backHome" v-model="channelId"/>
     </div>
     </van-popup>
     </div>
  </div>
</template>
<script>
import ArticleList from '@/components/ArticleList.vue'
import { firstActions, secondActions } from '@/api/report'
import { Notify } from 'vant'
import EditChannel from './EditChannel.vue'
import { mapState } from 'vuex'
export default {
  name: 'HomeC',
  data () {
    return {
      channelId: 0,
      show: false,
      showOther: false,
      showAddChannel: false,
      cancelText: '取消',
      actions: firstActions,
      artId: '',
      reportContent: ''
    }
  },
  components: {
    ArticleList,
    EditChannel
  },
  computed: {
    ...mapState('home', { userChannels: 'userChannels' })
  },
  mounted () {
    this.$bus.$on('showBack', (artId) => {
      this.show = true
      this.artId = artId
    })
  },
  beforeDestroy () {
    this.$bus.$off('showback')
  },
  created () {
    this.$store.dispatch('home/getUserChannels')
    this.$store.dispatch('home/getAllChannels')
  },
  methods: {
    onSelect (action, index) {
      if (action.name === '反馈的垃圾内容') {
        this.actions = secondActions
        this.cancelText = '返回'
      } else if (action.name === '不感兴趣') {
        this.dislikeFn()
        this.show = false
      } else if (action.name === '其他问题') {
        this.showOther = true
      } else {
        const type = `${action.value}-${action.name}`
        const remark = ''
        this.reportFn(type, remark)
        console.log('举报成功')
        this.show = false
      }
    },
    onClose () {
      this.actions = firstActions
      this.cancelText = '取消'
    },
    onCancel () {
      if (this.cancelText === '返回') {
        this.actions = firstActions
        this.show = true
        this.cancelText = '取消'
      }
    },
    async  dislikeFn () {
      try {
        await this.$API.reqDislikeArticle(this.artId)
        Notify({ type: 'success', message: '反馈成功' })
      } catch (error) {
        Notify({ type: 'danger', message: '反馈失败' })
      }
    },
    async reportFn (type, remark) {
      try {
        await this.$API.reqReportArticle({ target: this.artId, type, remark })
        Notify({ type: 'success', message: '举报成功' })
      } catch (error) {
        Notify({ type: 'danger', message: '举报失败' })
      }
    },
    reportOtherFn () {
      const type = `${0}-其他问题`
      this.reportFn(type, this.reportContent)
      this.show = false
    },
    editChannel () {
      this.showAddChannel = true
    },
    backHome () {
      this.showAddChannel = false
    },
    enterSearch () {
      this.$router.push({ path: '/search' })
    }
  }
}
</script>
<style lang="less" scoped>
.logo {
  height: 30px;
  width: 100px;
}
.main {
  padding-top: 46px;
}
.other_content{
height: 100px;
width: 100%;
border: 1px solid #ccc;
}
/deep/ .van-tabs__wrap
{
padding-right: 30px;
background-color: #fff;
}
.addchannel
{
  position: fixed;
  z-index: 999;
  top:60px;
  right:8px;
  color:#ccc;
}
.edit_channel{
width: 100vw;
height: 100vh;
}
</style>
